<template>
  <div class="report-wrapper user-conversion">
    <div class="main-bd" style="min-height: 500px;">
      <div class="content-wrap">
        <!-- <div class="search-con">
          <Select v-model="levelId" style="width:200px;" :placeholder="this.$t('m.yònghùděngjí')">
            <Option :value="''">{{ $t("m.entire") }}</Option>
            <Option v-for="item in userDataClass" :value="item.levelId">{{item.levelName}}</Option>
          </Select>

          <Select
            v-model="levelStatus"
            style="width:200px;    margin-left: 20px;"
            :placeholder="this.$t('m.status')"
          >
            <Option :value="''">{{ $t("m.entire") }}</Option>
            <Option :value="'1'">{{ $t("m.jīhuó") }}</Option>
            <Option :value="'0'">{{ $t("m.wèijīhuó") }}</Option>
          </Select>

          <Button type="primary" @click="withdrawNew" style="float: right; margin: 4px;">
            <Icon type="md-add"/>
            {{ $t('m.xīnjiàn') }}
          </Button>
        </div>-->

        <div class="table-con">
          <!-- <h3 class="table-title" style="display: inline-block; margin-right: 10px;">{{ $t('m.tíépèizhìlièbiǎo') }}</h3> -->
          <div class="table-con-title">
            <div class="title">
              <div class="borderLeft"></div>
              <span>{{$t('m.tíépèizhì')}}</span>
            </div>
            <Button type="primary" @click="withdrawNew">
              <Icon type="md-add"/>
              {{ $t('m.xīnjiàn') }}
            </Button>
          </div>

          <Table border :columns="udColumns" :data="userDataList" :loading="udLoading" ref="table">
            <template slot-scope="{ row, index }" slot="action">
              <Button
                type="primary"
                style="margin-right: 5px"
                @click="withdrawEdit(row)"
              >{{ $t('m.edit') }}</Button>
            </template>
          </Table>
          <Page
            :total="userDataListSize"
            :current.sync="userDataPages"
            :page-size-opts="[10, 20, 40, 80, 100]"
            show-total
            show-elevator
            show-sizer
            @on-change="userDataCurrentChange"
            @on-page-size-change="userDataSizeChange"
          ></Page>
        </div>
      </div>
    </div>
    <Modal v-model="withdrawModal" :title="this.$t('m.pèizhì')" :mask-closable="false" footer>
      <span slot="footer"></span>
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="120"
        style="margin:0px 70px 0px 30px"
      >
        <FormItem :label="this.$t('m.yònghùděngjímíngchēng')" prop="levelName">
          <Input
            v-model="formValidate.levelName"
            :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.yònghùděngjímíngchēng')"
          ></Input>
        </FormItem>
        <FormItem :label="this.$t('m.miáoshù')" prop="levelRemark">
          <Input
            v-model="formValidate.levelRemark"
            :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.miáoshù')"
          ></Input>
        </FormItem>
        <FormItem :label="this.$t('m.status')" prop="levelStatus">
          <RadioGroup v-model="formValidate.levelStatus">
            <Radio :label="1">{{$t('m.jīhuó')}}</Radio>
            <Radio :label="0">{{$t('m.wèijīhuó')}}</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem :label="this.$t('m.shēngjíxūyàohuánqīngcìshù')" prop="levelRepaidTimes">
          <Input
            v-model="formValidate.levelRepaidTimes"
            :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.shēngjíxūyàohuánqīngcìshù')"
          ></Input>
        </FormItem>
        <FormItem :label="this.$t('m.jièkuǎnjīné')" prop="levelLoanAmount">
          <Select
            v-model="formValidate.levelLoanAmount"
            :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.jièkuǎnjīné')"
          >
            <Option v-for="item in  formValidateSelect.levelLoanAmount" :value="item">{{ item }}</Option>
          </Select>

          <!-- <Input v-model="formValidate.levelLoanAmount" :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.jièkuǎnjīné')"></Input> -->
        </FormItem>
        <FormItem :label="this.$t('m.jièkuǎntiānshù')" prop="levelLoanDay">
          <Select
            v-model="formValidate.levelLoanDay"
            :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.jièkuǎntiānshù')"
          >
            <Option v-for="item in  formValidateSelect.levelLoanDay" :value="item">{{ item }}</Option>
          </Select>

          <!-- <Input v-model="formValidate.levelLoanDay" :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.jièkuǎntiānshù')"></Input> -->
        </FormItem>
        <FormItem :label="this.$t('m.overdueDay')" prop="levelOverdueDays">
          <Input
            v-model="formValidate.levelOverdueDays"
            :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.overdueDay')"
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="withdrawOk('formValidate')">{{ $t('m.submit')}}</Button>
          <Button @click="withdrawCancel" style="margin-left: 8px">{{ $t('m.cancel') }}</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import excel from "@/static/excel";

export default {
  data() {
    return {
      levelId: "",
      levelStatus: "",
      withdrawEditName: "",
      formValidate: {
        levelId: "",
        levelName: "",
        levelRemark: "",
        levelStatus: 1,
        levelLoanAmount: "",
        levelLoanDay: "",
        levelRepaidTimes: "",
        levelOverdueDays: ""
      },
      formValidateSelect: {},
      ruleValidate: {
        levelName: [
          {
            required: true,
            message:
              this.$t("m.qǐngshūrù") + this.$t("m.yònghùděngjímíngchēng"),
            trigger: "blur"
          }
        ],
        levelRemark: [
          {
            required: true,
            message: this.$t("m.qǐngshūrù") + this.$t("m.miáoshù"),
            trigger: "blur"
          }
        ],
        levelLoanAmount: [
          {
            required: true,
            type: "string",
            message:
              this.$t("m.qǐngshūrù") + this.$t("m.shēngjíxūyàoxiāofèicìshù"),
            trigger: "blur"
          }
        ],
        levelLoanDay: [
          {
            required: true,
            type: "string",
            message: this.$t("m.qǐngshūrù") + this.$t("m.jièkuǎnjīné"),
            trigger: "blur"
          }
        ],
        levelRepaidTimes: [
          {
            required: true,
            type: "string",
            message: this.$t("m.qǐngshūrù") + this.$t("m.jièkuǎntiānshù"),
            trigger: "blur"
          }
        ],
        levelOverdueDays: [
          {
            required: true,
            type: "string",
            message: this.$t("m.qǐngshūrù") + this.$t("m.overdueDay"),
            trigger: "blur"
          }
        ]
      },

      repaymentDate: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      userDataTimeDefault: [],
      userDataListSum: [{}],
      userDataListSize: 1,
      userDataTimeStart: "",
      userDataTimeEnd: "",
      userDataList: [], // user transfer list
      userDataClass: [],
      userDataPageNumber: 1,
      userDataPageSize: 10,
      userDataPages: 1,
      utLoading: true,
      udLoading: true,
      withdrawModal: false,

      udColumns: [
        {
          title: this.$t("m.děngjíbiānhào"),
          key: "levelId",
          sortable: "true",
          align: "center"
        },
        {
          title: this.$t("m.yònghùděngjímíngchēng"),
          key: "levelName",
          align: "center"
        },
        {
          title: this.$t("m.miáoshù"),
          key: "levelRemark",
          align: "center"
        },
        {
          title: this.$t("m.status"),
          key: "levelStatus",
          align: "center",
          render: (h, params) => {
            return h(
              "span",
              params.row.levelStatus == 1
                ? this.$t("m.jīhuó")
                : this.$t("m.wèijīhuó")
            );
          }
        },
        {
          title: this.$t("m.shēngjíxūyàohuánqīngcìshù"),
          key: "levelRepaidTimes",
          sortable: "true",
          align: "center"
        },
        {
          title: this.$t("m.jièkuǎnjīné"),
          key: "levelLoanAmount",
          sortable: "true",
          align: "center",
          render: (h, param) => {
            return h("div", this.formatTreeMount(param.row.levelLoanAmount));
          }
        },
        {
          title: this.$t("m.jièkuǎntiānshù"),
          key: "levelLoanDay",
          sortable: "true",
          align: "center"
        },
        {
          title: this.$t("m.overdueDay"),
          key: "levelOverdueDays",
          sortable: "true",
          align: "center"
        },
        {
          title: this.$t("m.operate"),
          slot: "action",
          align: "center"
        }
      ]
    };
  },
  created() {
    this.userDataQuery(true);
    this.getConfigList();
  },
  watch: {
    levelId() {
      this.userDataQuery();
    },
    levelStatus() {
      this.userDataQuery();
    }
  },
  methods: {
    // 获取用户详情
    userDataQuery(v = false) {
      let param = {},
        query = "";
      (param.levelId = this.levelId), (param.pageSize = this.userDataPageSize);
      param.pageNumber = this.userDataPageNumber;
      // param.levelName = '',
      (param.levelStatus = this.levelStatus),
        Object.keys(param).forEach((item, index) => {
          if (param[item]) {
            query += `${index === 0 ? "" : "&"}${item}=${param[item]}`;
          }
        });
      var url = `/api/laocai/userLevel/list?&pageSize=10&pageNumber=1`;
      this.$http.get(url).then(res => {
        if (res.body.code == 0) {
          if (v) {
            let Class = [];
            for (const key in res.body.result.list) {
              Class.push({
                levelId: res.body.result.list[key].levelId,
                levelName: res.body.result.list[key].levelName
              });
            }
            this.userDataClass = [...new Set(Class)];
          }
          this.userDataList = res.body.result.list;
          this.userDataListSize = res.body.result.size;
          setTimeout(() => {
            this.utLoading = false;
            this.udLoading = false;
          }, 500);
        }
        this.$Message.success(this.$t("m.errorCode" + res.body.code));
      });
    },

    // 页码改变的回调，返回改变后的页码
    userDataCurrentChange(val) {
      this.udLoading = true;
      this.userDataPageNumber = val;
      this.userDataQuery();
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    userDataSizeChange(val) {
      this.udLoading = true;
      this.userDataPageSize = val;
      this.userDataQuery();
    },

    withdrawOk() {
      if (this.withdrawEditName == this.formValidate.levelName) {
        this.withdrawOkGo();
      } else {
        this.$http
          .get(
            "/api/laocai/userLevel/check/levelName?levelName=" +
              this.formValidate.levelName
          )
          .then(res => {
            if (res.body.code == 0) {
              if (res.body.result) {
                this.withdrawOkGo();
              } else {
                this.$Message.success(
                  this.$t("m.yònghùděngjímíngchēng") +
                    this.$t("m.bùnéngchóngfù")
                );
              }
            } else {
              this.$Message.success(this.$t("m.errorCode" + res.body.code));
            }
          });
      }
    },

    withdrawOkGo() {
      (this.formValidate.levelLoanAmount = this.formValidate.levelLoanAmount.toString()),
        (this.formValidate.levelLoanDay = this.formValidate.levelLoanDay.toString()),
        this.$refs["formValidate"].validate(valid => {
          if (valid) {
            this.$http
              .post("/api/laocai/userLevel/info", {
                levelId: this.formValidate.levelId,
                levelName: this.formValidate.levelName,
                levelRemark: this.formValidate.levelRemark,
                levelStatus: this.formValidate.levelStatus,
                levelLoanAmount: this.formValidate.levelLoanAmount,
                levelLoanDay: this.formValidate.levelLoanDay,
                levelRepaidTimes: this.formValidate.levelRepaidTimes,
                levelOverdueDays: this.formValidate.levelOverdueDays
              })
              .then(res => {
                if (res.body.code == 0) {
                  this.withdrawModal = false;
                  this.userDataQuery();
                  this.$Message.success(this.$t("m.errorCode" + res.body.code));
                } else {
                  this.$Message.error(this.$t("m.errorCode" + res.body.code));
                }
                this.withdrawEditName = "";
                this.this.formValidate.levelId = "";
              });
          } else {
          }
        });
    },

    getConfigList() {
      this.configLoading = true;
      this.$http.get("/api/laocai/sys/config/list").then(
        res => {
          res.body.result;
          for (const key in res.body.result) {
            if (res.body.result[key].name == "loanAmountArray") {
              this.formValidateSelect.levelLoanAmount = eval(
                "(" + res.body.result[key].value + ")"
              );
            }
            if (res.body.result[key].name == "loanDaysArray") {
              this.formValidateSelect.levelLoanDay = eval(
                "(" + res.body.result[key].value + ")"
              );
            }
          }
        },
        er => {
          console.log(error);
        }
      );
    },

    withdrawCancel() {
      this.withdrawModal = false;
      this.formValidate = {
        levelName: "",
        levelRemark: "",
        levelStatus: 1,
        levelLoanAmount: "",
        levelLoanDay: "",
        levelRepaidTimes: "",
        levelOverdueDays: ""
      };
    },
    withdrawEdit(v) {
      this.withdrawEditName = v.levelName;
      this.formValidate.levelId = v.levelId;
      this.formValidate.levelName = v.levelName;
      this.formValidate.levelRemark = v.levelRemark;
      this.formValidate.levelLoanAmount = v.levelLoanAmount;
      this.formValidate.levelLoanDay = v.levelLoanDay;
      this.formValidate.levelRepaidTimes = v.levelRepaidTimes.toString();
      this.formValidate.levelOverdueDays = v.levelOverdueDays.toString();
      this.formValidate.levelStatus = v.levelStatus;
      this.withdrawModal = true;
      console.log(this.formValidate, "后数据");
    },

    // 导出用户数据汇总Excel
    withdrawNew() {
      (this.formValidate = {
        levelName: "",
        levelRemark: "",
        levelStatus: 1,
        levelLoanAmount: "",
        levelLoanDay: "",
        levelRepaidTimes: "",
        levelOverdueDays: ""
      }),
        (this.withdrawModal = true);
    }
  }
};
</script>

<style lang="scss" scoped>
.user-conversion {
  .table-con-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin: 10px 0;
    .title {
      padding-left: 0;
      .borderLeft {
        display: inline-block;
        width: 3px;
        height: 16px;
        background: #2d8cf0;
        margin-right: 10px;
        vertical-align: middle;
      }
      span {
        vertical-align: middle;
        font-size: 16px;
        color: #222222;
      }
    }
  }
}

.report-wrapper {
  .ivu-table td {
    &.mouse-hover {
      .ivu-poptip-rel {
        span {
          font-weight: bold;
          text-decoration: underline;
        }
      }
    }
    &.mouse-hover:hover {
      background: #ebf7ff;
      .ivu-poptip-rel {
        cursor: pointer;
      }
    }
  }

  .search-con {
    .search-col {
      margin-left: 10px;
    }

    .search-col,
    .search-input {
      display: inline-block;
      width: 200px;
    }
  }

  .table-con {
    .table-title {
      margin-bottom: 18px;
    }

    .expand-more {
      line-height: 24px;
      border-left: 1px solid #e8eaec;
      border-right: 1px solid #e8eaec;
      border-bottom: 1px solid #e8eaec;
      font-size: 12px;
      // background: #f8f8f9;
      text-align: center;
      cursor: pointer;
    }
  }

  .ivu-page {
    margin-top: 12px;
    text-align: right;
  }
}
</style>
